---
title: "Setup"
sidebarTitle: "Setup"
description: "Create a brand-new folder with packages powered by React Print."
icon: "fa-solid fa-hammer"
---
# Fast Set Up ⚡️

Clone this repository ⬇️
<Card 
  title='dev-local'
  icon='fa-brands fa-github'
  href='https://github.com/OnedocLabs/dev-local'
>
Clone our dev-local repository and follow the instructions in the readMe to get started quickly.
</Card>

![dev-local view](https://github.com/OnedocLabs/dev-local/blob/main/src/images/screenshot-dev-local.png?raw=true)

<Callout intent='tip' title='Using dev-local'>
We recommed splitting your editor into two windows, one for the code and the other for the PDF viewing integration.
</Callout>

# Manual Set Up 🛠️

## 1. Create directory

Create a new folder called `react-print-starter` and initialize a new npm project

```sh
mkdir react-print-starter
cd react-print-starter
npm init -y
```

## 2. Install the dependencies

Get the react-print package locally

<CodeBlocks>

```sh title="npm"
npm install @fileforge/react-print
```

```sh title="yarn"
yarn add @fileforge/react-print
```

```sh title="pnpm"
pnpm add @fileforge/react-print
```

</CodeBlocks>

## 3. Create your first PDF Component

Create a new `documents` folder, then create a new file inside called `index.jsx` and copy the following code:


```jsx document/index.tsx
import { PageTop, PageBottom, PageBreak } from "@fileforge/react-print";
import * as React from "react";

export const Document = ({ props }) => {
  return (
    <div>
      <PageTop>
        <span>Hello #1</span>
      </PageTop>
      <div>Hello #2</div>
      <PageBottom>
        <div className="text-gray-400 text-sm">Hello #3</div>
      </PageBottom>
      <PageBreak />
      <span>Hello #4, but on a new page ! </span>
    </div>
  );
};
```

## 4. Compile your document to HTML

Back in your parent folder, create a `main.jsx` file that imports your document an renders it using the `compile` function.

```js index.tsx
import { compile } from "@fileforge/react-print";
import { Document } from "./document";

const html = await compile(<Document />);

console.log(html);
```

## 5. Generate your document with FileForge

We recommend generating your PDF using the [FileForge API](/integrations/onedoc), as it is specifically designed to integrate seamlessly with react-print. However, you are welcome to choose any external renderer that better meets your needs.
[How to generate my PDF from my react-print component.](/api-reference/api-reference/generate)

## 6. Next steps

Try to modify your PDF by using our different pre-built components.

<Cards>
  <Card title="Compile" icon='up' href="/react-print/components/compile">
    A React component to help compile your React code for PDF rendering.
  </Card>

{" "}

<Card title="Footnote" icon="file" href="/components/footnote">
  A React component to help you build beautiful foot-notes.
</Card>

  <Card title="Shell" icon='table-layout' href="/components/button">
    A suite of React components for structured document layout management.
  </Card>
</Cards>
